<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="/css/form.css" /> 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="/js/jquery.pajinate.js"></script>
	<script type="text/javascript" src="/js/flames.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
				$('#paging_container').pajinate({
					items_per_page : 5
				});
	});
	</script>
</head>
<body>
<form id="flamesform" method="post" action="/calculate">

<input type="hidden" name="access_token" value="<c:out value='${access_token}'/>" />
<div class="info">
 Select the friend to calculate flames!! 
</div>
<div class="friends">
<div id="paging_container" class="container">
<div class="page_navigation"></div>
<br>
<ul class="content">
<c:forEach var="friend" items="${details}">
	
	<li>
		<div class="eachData">
		<input type="radio" name="selectedfriend" value="<c:out value='${friend.id}' />">
		<img src="<c:out value='${friend.picture}' />" />
		<span class="friendname"><c:out value="${friend.name}"/></span>
	    </div>
	</li>
	
</c:forEach>
</ul>
</div>
<br><br>
<div class="submitBtnDiv">
	<a class="submitBtn" href="javasript:{}" onclick="document.getElementById('flamesform').submit(); return false;">CALCULATE</a> 
</div>
</div>
</form>
</body>
</html>